<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色列表</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/roleManagement.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
</head>
<style>
    .showmessages{
        position: absolute;
        width: 100%;
        margin-top: 120px;
    }
</style>
<body>
    <div class="titleall">
        <div class="titleph">
            <img src="${pageContext.request.contextPath}/static/images/role.png" style="width:100%;height:100%;"/>
        </div>
        <div class="titleword">角色管理 >>> 角色列表</div>
    </div>
    <div class="rolephall1">
        <img src="${pageContext.request.contextPath}/static/images/gonggaofind.png" style="width:100%;height:100%"/>
    </div>
    <form action="/selectcharacter.do" method="post" id="selectform">
        <input type="text" class="selectbox" name="rolename" id="rolename" placeholder="角色名称 / Name"/>
        <input type="submit" value="查询角色" class="selectbutton"/>
    </form>
    <div class="showmessages">
        <table class="layui-table">
            <thead>
            <tr>
                <th style="border:1px solid #999;text-align: center;color:#EC9D1A;font-weight:600;">序号</th>
                <th style="border:1px solid #999;text-align: center;color:#EC9D1A;font-weight:600;">角色名称</th>
                <th style="border:1px solid #999;text-align: center;color:#EC9D1A;font-weight:600;">修改角色</th>
                <th style="border:1px solid #999;text-align: center;color:#EC9D1A;font-weight:600;">删除角色</th>
            </tr>
            </thead>
            <tbody id="clear" style="display: none">
            <script>var arr1=[]</script>
            <c:forEach items="${sessionScope.rolelist}" var="role" varStatus="sta">
                <tr id="roleorder${sta.count}" class="rolerow1">
                    <form method="post">
                        <td style="border:1px solid #999;color:#777;font-weight:600;font-size:16px;">${sta.count}</td>
                        <td style="border:1px solid #999;font-size:16px;">${role.character_name}</td>
                        <input type="hidden" value="${role.character_name}" class="cname"/>
                        <td style="border:1px solid #999;text-align: center">
                            <input type="button" value="修改" class="modifyrole" onclick="clmodify(this,${role.character_id})" onmouseover="overm(this,${sta.count})"  onmouseout="outm(this,${sta.count})"/>
                        </td>
                    </form>
                    <form method="post">
                        <td style="border:1px solid #999">
                            <input type="hidden" name="cname1" value="${role.character_name}" class="cname1"/>
                            <input type="hidden" name="cid1" value="${role.character_id}" class="cid1"/>
                            <input type="button" value="删除" class="deleterole" onclick="cl(this,${role.character_id})" onmouseover="overm1(this,${sta.count})"  onmouseout="outm1(this,${sta.count})"/>
                        </td>
                    </form>
                </tr>
            <script>arr1.push($("#roleorder${sta.count}")[0])</script>
            </c:forEach>
            </tbody>
            <tbody id="biuuu_city_list"></tbody>
        </table>
        <div id="demo20"></div>
    </div>
    <div class="shelter">
        <div class="confirm">
            <div class="tishiph"><img src="${pageContext.request.contextPath}/static/images/tishi.png"
                                      style="width:100%;height:100%;"/></div>
            <div class="confirmword">该角色正在被使用！</div>
            <div class="close"><img src="${pageContext.request.contextPath}/static/images/close.png"
                                    style="width:100%;height:100%;"/></div>
            <input type="button" class="cf" value="确定"/>
        </div>
    </div>
    <div class="shelter1">
        <div class="succ">
            <div class="tishiph1"><img src="${pageContext.request.contextPath}/static/images/cg.png"
                                       style="width:100%;height:100%;"/></div>
            <div class="confirmword1">删除角色成功！</div>
            <div class="close1"><img src="${pageContext.request.contextPath}/static/images/close.png"
                                     style="width:100%;height:100%;"/></div>
            <input type="button" class="cf1" value="确定"/>
        </div>
    </div>
    <div class="shelter3">
        <div class="confirm3">
            <div class="tishiph3"><img src="${pageContext.request.contextPath}/static/images/tishi.png"
                                       style="width:100%;height:100%;"/></div>
            <div class="confirmword3">您确定要删除角色吗？</div>
            <div class="close3"><img src="${pageContext.request.contextPath}/static/images/close.png"
                                     style="width:100%;height:100%;"/></div>
            <input type="button" class="cf3" value="确定"/>
        </div>
    </div>
</body>
<script src="${pageContext.request.contextPath}/static/frame/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var selectrolename = "${sessionScope.rolelist}";
    if (selectrolename == ""||selectrolename=="[]"||selectrolename==null) {
        $(".showmessages").html("<div class='searchrole'><img src='${pageContext.request.contextPath}/static/images/cry.png'/><div class='noword'>您输入的角色不存在！</div></div>");
    }
    var w = $(window).width();
    var h = $(window).height();
    $(".shelter").innerHeight(h + "px");
    $(".shelter1").innerHeight(h + "px");
    $(".shelter3").innerHeight(h + "px");
    $(".contentall").innerWidth(w + "px");
    $(".close").click(function () {
        $(".shelter").css("display", "none");
    });
    $(".close1").click(function () {
        $(".shelter1").css("display", "none");
        window.location.href = "${pageContext.request.contextPath}/roleManagement";
    });
    $(".close3").click(function () {
        $(".shelter3").css("display", "none");
    });
    $(".cf1").click(function () {
        window.location.href = "${pageContext.request.contextPath}/roleManagement";
    });

    //删除ajax
    function cl(e, index) {
        $(".shelter3").css("display", "block");
        $(".cf3").click(function () {
            $(".shelter3").css("display", "none");
            $.ajax({
                type: 'POST',
                url: "${pageContext.request.contextPath}/deleterole.do",
                data: {
                    cid1: index
                },
                dataType: "json",
                success: function (data) {
                    if (data == true) {
                        $.ajax({
                            type: 'POST',
                            url: "${pageContext.request.contextPath}/flush.do",
                            data: "",
                            dataType: "json",
                            success: function (data) {
                                if (data == true) {
                                    $(".shelter1").css("display", "block");
                                }
                            }
                        });
                    }
                    if (data == false) {
                        $(".shelter").css("display", "block");
                        $(".cf").click(function () {
                            $(".shelter").css("display", "none");
                        });
                    }
                }
            });
        });
    }

    function nodeToString ( node ) {
        var tmpNode = document.createElement( "div" );
        tmpNode.appendChild( node.cloneNode( true ) );
        var str = tmpNode.innerHTML;
        tmpNode = node = null; // prevent memory leaks in IE
        return str;
    }
    function clear(){
        document.getElementById('clear').innerHTML=null;
    }

    layui.use(['carousel', 'laypage','laydate','form','upload','jquery'], function(){
        var carousel = layui.carousel
            ,form = layui.form
            ,$=layui.jquery
            ,upload = layui.upload
            ,laypage = layui.laypage
            ,laydate=layui.laydate

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });
        var data1= arr1;
        laypage.render({
            elem: 'demo20'
            ,count: data1.length
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function(){
                    var arr = []
                        ,thisData = data1.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function(index, item){
                        var itemstr=nodeToString(item);
                        arr.push(itemstr);
                    });
                    clear();
                    return arr.join('');
                }();
            }
        });
    });
    function clmodify(e,index){
        $.ajax({
            type: 'POST',
            url: "${pageContext.request.contextPath}/modifyroles1.do",
            data: {
                cid: index
            },
            dataType: "json",
            success: function (data) {
                 if(data==true){
                     window.location.href = "${pageContext.request.contextPath}/modifyroleflush";
                 }
            }
        });
    }
    function overm(e,index){
        e.style.backgroundColor="rgba(50,200,30,0.9)";
        e.style.color="white";
    }
    function outm(e,index){
        e.style.backgroundColor="rgba(30,120,0,0)";
        e.style.color="#555";
    }
    function overm1(e,index){
        e.style.backgroundColor="rgba(200,0,0,0.8)";
        e.style.color="white";
    }
    function outm1(e,index){
        e.style.backgroundColor="rgba(30,120,0,0)";
        e.style.color="#555";
    }
    $(".selectbox").focus(function(){
        $(".selectbox").css("border","1px solid #333");
    });
    $(".selectbox").focusout(function(){
        $(".selectbox").css("border","1px solid #999");
    });
</script>
</html>